<!DOCTYPE html>
<html lang="en" style="height: 100%" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>期权交易</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/morris/morris-0.4.3.min.css">
    <link rel="stylesheet" href="/js/plugins/gritter/jquery.gritter.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>
        /*定义类名为.thead-blue的样式*/
        .table .thead-blue th {
            color: #fff;
            background-color: #3195f1;
        }

        /*模态框导致页面偏移问题*/
        .modal-open {
            overflow-y: scroll;
        }

        #quoteTable tr {
            height: 60px;
        }

        #button tr {
            height: 80px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
            margin-right: 20px;
        }

        .toast-center-center {
            left: 50%;
            top: 35%;
            transform: translate(-50%, -50%);
        }

        #quoteForm select {
            width: 196px;
        }

        #quoteForm input {
            width: 196px;
        }

        #quoteForm td {
            padding-left: 25px;
          }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="wrapper wrapper-content animated fadeInRight">
            <h2 style="margin-left: 290px"><strong>外汇期权</strong></h2><br>
            <form class="form-inline" id="quoteForm">
                <!--隐藏域,用来接收询价返回的quotePriceNo(询价请求编号)-->
                <div>
                    <input type="hidden" id="quotePriceNo" name="quotePriceNo"/>
                </div>
                <fieldset id="forbid">
                    <table id="quoteTable">
                        <tr>
                            <td>
                                Trade Date
                            </td>
                            <td>
                                <input type="date" class="form-control" id="tradeDate" name="tradeDate"
                                       placeholder="请确认交易时间">
                            </td>
                            <td>
                                Customer Number
                            </td>
                            <td>
                                <input type="text" class="form-control" id="customerNo" name="customerNo"
                                       placeholder="请输入客户号" onblur="checkCustomerNo()" maxlength="6">

                            </td>
                        </tr>
                        <tr>
                            <td>
                                Buy/Sell
                            </td>
                            <td>
                                <select class="form-control" id="buySelloption" name="buySelloption">
                                    <option value="S" selected>Sell</option>
                                    <option value="B">Buy</option>
                                </select>
                            </td>
                            <td>
                                Customer Name
                            </td>
                            <td>
                                <input type="text" class="form-control" id="customerName" disabled>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                Put Currency
                            </td>
                            <td>
                                <select class="form-control" id="currency1" name="currency1">
                                    <option value="" selected></option>
                                    <option th:each="curreny1List:${currenyMap}" th:value="${curreny1List.key}"
                                            th:text="${curreny1List.value}"></option>
                                </select>
                            </td>
                            <td>
                                Put Amount
                            </td>
                            <td>
                                <input type="text" class="form-control" id="amount1" name="amount1"
                                       onblur="checkBothAmount()" maxlength="10">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Put AcNo
                            </td>
                            <td>
                                <input type="text" class="form-control" id="accountNo1" name="accountNo1" disabled>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Call Currency
                            </td>
                            <td>
                                <select class="form-control" id="currency2" name="currency2">
                                    <option value="" selected></option>
                                    <option th:each="curreny2List:${currenyMap}" th:value="${curreny2List.key}"
                                            th:text="${curreny2List.value}"></option>
                                </select>
                            </td>
                            <td>
                                Call Amount
                            </td>
                            <td>
                                <input type="text" class="form-control" id="amount2" name="amount2"
                                       onblur="checkBothAmount()" maxlength="10">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Call AccountNumber
                            </td>
                            <td>
                                <input type="text" class="form-control" id="accountNo2" name="accountNo2" disabled>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                Standard Rate
                            </td>
                            <td>
                                <input type="text" class="form-control" id="rate" name="rate" disabled>
                            </td>
                            <td>
                            </td>
                        </tr>

                    </table>
                </fieldset>

                <table id="button">
                    <tr>
                        <td>
                            Strike Rate
                        </td>
                        <td>
                            <input type="number" style="margin-left: 55px;" class="form-control" id="strikeRate" name="strikeRate" step="0.00001" min="0.00001" disabled>
                        </td>
                        <td>
                            Expire Date
                        </td>
                        <td>
                            <input type="date" style="margin-left: 45px;" class="form-control" id="expireDate" name="expireDate" disabled
                                   placeholder="请确认交割时间">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <button type="button" class="btn btn-success  m-l-md" id="QuotePrice" style="margin-left: 70px">RFQ</button>
                            <button type="button" class="btn btn-danger  m-l-md" data-toggle="modal" data-target="#confirmModal" id="cancelQuote" disabled>Cancel RFQ</button>
                            <button type="button" class="btn btn-success  m-l-md" id="SendOption" onclick="sendOption()" disabled style="margin-left: 70px">Trade</button>
                        </td>
                    </tr>


                </table>
            </form>

            <!--隐藏表单接收询价返回的数据-->
            <form class="form-inline" id="optionForm">
                <input type="hidden" id="optionTradeDate" name="tradeDate"/>
                <input type="hidden" id="optionCustomerNo" name="customerNo"/>
                <input type="hidden" id="optionPutAmount" name="putAmount"/>
                <input type="hidden" id="optionCallAmount" name="callAmount"/>
                <input type="hidden" id="optionPutAcNo " name="putAcNo"/>
                <input type="hidden" id="optionCallAcNo" name="callAcNo"/>
                <input type="hidden" id="optionPutCcy" name="putCcy"/>
                <input type="hidden" id="optionCallCcy" name="callCcy"/>
                <input type="hidden" id="optionBuySell" name="buySellOption"/>
                <input type="hidden" id="optionStandardRate" name="standardRate"/>
            </form>
        </div>
    </div>
</div>

<!--信息确认模态框-->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">确认操作</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确定取消期权RFQ吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-editable.js"></script>
<script src="/bootstrap/js/bootstrap-table.min.js"></script>
<script src="/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/plugins/pace/pace.min.js"></script>
<script src="/js/optionRfq.js"></script>
<script src="js/sendOption.js"></script>
<script src="/js/index.js"></script>

</body>

</html>
